<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>博雅首页</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.cl{
			clear: both;
		}
		body{
			font-family: "Microsoft YaHei","SimSun";
			height: 8888px;
		}
		.inner_c{
			width: 1000px;
			margin: 0 auto;
		}
		.header{
			height: 58px;
			background-color: #191D3A;
		}
		.header .logo{
			float: left;
			padding-left: 12px;
			margin-right: 39px;
			width: 174px;
			height: 58px;
		}
		.header .logo a{
			display: block;
			width: 174px;
			height: 58px;
			background:url(images/logo.png) no-repeat;
			text-indent: -999em;
		}
		.header .nav{
			float: left;
			width: 607px;
			height: 58px;
		}
		.header .nav ul{
			list-style: none;
		}
		.header .nav ul li{
			float: left;
			width: 100px;
			height: 58px;
			border-left: 1px solid #252947;
		}
		.header .nav ul li.last{
			border-right: 1px solid #252947;
		}
		.header .nav ul li a{
			display: block;
			width: 100px;
			height: 58px;
			text-align: center;
			line-height: 58px;
			color:#818496;
			text-decoration: none;
			font-size: 14px;
		}
		.header .nav ul li a:hover{
			background-color: #252947;
			color:#E2E4ED;
		}
		.header .nav ul li.current a{
			background-color: #252947;
			color:#E2E4ED;
		}
		.header .jrwm{
			float: left;
			padding-top: 12px;
			padding-left: 48px;
		}
		.header .jrwm a{
			display: block;
			width: 98px;
			height: 32px;
			background-color: #38B774;
			border: 1px solid #3ACA7A;
			/*IE8开始兼容：CSS3课上介绍*/
			/*做圆角的：*/
			border-radius: 4px;
			text-align: center;
			line-height: 32px;
			text-decoration: none;
			color:white;
			font-size: 14px;
		}
		.header .jrwm a:hover{
			background-color: #48C784;
		}

		.banner{
			height: 465px;
			background: url(images/banner.jpg) no-repeat center center;
		}

		.content{
			padding-top: 50px;
			height: 650px;
			background:url(images/indexmainbg.jpg) no-repeat center bottom;
		}
		.content .product{
			height: 229px;
			border-bottom: 1px solid #DBE1E7;
		}
		.content .product ul{
			list-style: none;
		}
		.content .product ul li{
			float: left;
			width: 218px;
			height: 229px;
			margin-right: 43px;
		}
		.content .product ul li.last{
			margin-right: 0;
			width: 217px;
		}
		.content .product ul li p.pro_image img{
			width: 100%;
			height: 130px;
		}
		.content .product ul li h3{
			text-align: center;
			line-height: 38px;
			font-size: 14px;
			font-weight: bold;
		}
		.content .product ul li p.play{
			text-align: center;
		}
		.content .product ul li p.play a{
			font-size: 12px;
			line-height: 12px;
			color:#38B774;
			text-decoration: none;
			padding-right: 10px;
			background: url(images/sanjiaoxing.png) no-repeat right center;
		}
		.content .info{
			padding-top: 53px;
		}
		.content .info .boyaanews{
			float: left;
			width: 500px;
			background:url(images/bynewsbg.jpg) no-repeat;
			padding-top: 111px;
			position: relative;
		}
		.content .info .boyaajobs{
			float: left;
			width: 500px;
			height: 314px;
			background:url(images/byhrbg3.jpg) no-repeat;
		}

		.content .info .boyaanews ul{
			list-style: none;
			padding: 0 20px;
		}
		.content .info .boyaanews .more{
			position: absolute;
			top: 40px;
			left: 218px;
			background-color: blue;
		}
		.content .info .boyaanews ul li{
			line-height: 50px;
			border-bottom: 1px solid #DBE1E7;
			font-size: 12px;
			
		}
		.content .info .boyaanews ul li span{
			color:#AFBECF;
			margin-right: 22px;
		}
		.content .info .boyaanews ul li a{
			color:#444866;
			text-decoration: none;
			font-size: 14px;
		}
		.content .info .boyaanews ul li a:hover{
			color:orange;
		}
		
		.content .info .boyaajobs{
			position: relative;
			
		}
		.content .info .boyaajobs .title{
			padding-top: 40px;
			padding-left: 78px;
			
		}
		.content .info .boyaajobs .more2{
			position: absolute;
			top: 40px;
			left: 218px;
			background-color: blue;
		}
		.content .info .boyaajobs .title h3{
			width: 119px;
			height: 51px;
			background:url(images/zczp.png) no-repeat;
			text-indent: -999em;
		}
		.content .info .boyaajobs h4{
			padding-top: 18px;
			padding-left: 20px;
			color:white;
			font-size: 14px;
			font-weight: bold;
		}
		.content .info .boyaajobs ul{
			padding-left: 20px;
			width: 305px;
			list-style: none;
		}
		.content .info .boyaajobs ul li{
			border-bottom: 1px solid #6FDEA3;
			line-height: 37px;
		}
		.content .info .boyaajobs ul li a{
			font-size: 14px;
			color:white;
			text-decoration: none;	
		}
		.content .info .boyaajobs ul li a:hover{
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="inner_c">
			<h1 class="logo">
				<a href="#">
					博雅互动-世界上最好的游戏公司
				</a>
			</h1>
			<div class="nav">
				<ul>
					<li class="current">
						<a href="#">首页</a>
					</li>
					<li>
						<a href="#">博雅游戏</a>
					</li>
					<li class="xiaoming">
						<a href="#">博雅新闻</a>
					</li>
					<li>
						<a href="#">关于我们</a>
					</li>
					<li>
						<a href="#">客服中心</a>
					</li>
					<li class="last">
						<a href="#">投资者关系</a>
					</li>
				</ul>
			</div>
			<div class="jrwm">
				<a href="#">加入我们</a>
			</div>
		</div>
	</div>

	<div class="cl"></div>

	<div class="banner"></div>

	<div class="content">
		<div class="inner_c">
			<div class="product">
				
				<ul>
					<li>
						<p class="pro_image">
							<img src="images/bpt.jpg" alt="" />
						</p>
						<h3>BPT宣传片</h3>
						<p class="play">
							<a href="">点击播放</a>
						</p>
					</li>
					<li>
						<p class="pro_image">
							<img src="images/gamepic1.jpg" alt="" />
						</p>
						<h3>BPT宣传片</h3>
						<p class="play">
							<a href="">点击播放</a>
						</p>
					</li>
					<li>
						<p class="pro_image">
							<img src="images/gamepic3.jpg" alt="" />
						</p>
						<h3>BPT宣传片</h3>
						<p class="play">
							<a href="">点击播放</a>
						</p>
					</li>
					<li class="last">
						<p class="pro_image">
							<img src="images/video.jpg" alt="" />
						</p>
						<h3>BPT宣传片</h3>
						<p class="play">
							<a href="">点击播放</a>
						</p>
					</li>
				</ul>
			</div>
			<div class="info">
				<div class="boyaanews">
					<a href="" class="more">
						<img src="images/more.png" alt="" />
					</a>
					<ul>
						<li>
							<span>09 / 28</span>
							<a href="">	
								2015博雅国际博客大赛（BPT）在澳门落幕
							</a>
						</li>
						<li>
							<span>09 / 28</span>
							<a href="">	
								2015博雅国际博客大赛（BPT）在澳门落幕
							</a>
						</li>
						<li>
							<span>09 / 28</span>
							<a href="">	
								2015博雅国际博客大赛（BPT）在澳门落幕
							</a>
						</li>
						<li>
							<span>09 / 28</span>
							<a href="">	
								2015博雅国际博客大赛（BPT）在澳门落幕
							</a>
						</li>
					</ul>
				</div>
				<div class="boyaajobs">
					<a href="" class="more2">
						<img src="images/more2.png" alt="" />
					</a>
					<div class="title">
						<h3>
							博雅招聘
						</h3>
					</div>
					<h4>专场招聘岗位:</h4>
					<ul>
						<li><a href="#">PHP开发工程师</a></li>
						<li><a href="#">C++开发工程师</a></li>
						<li><a href="#">WEB前端开发工程师</a></li>
						<li><a href="#">大数据开发工程师</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</body>
</html>